ItIron2021
Javascript
今天又要繼續非同步與promise的愛恨糾葛了,大家再努力一下下吧! 看久了promise的題目其實也是挺有趣的
請問下方的程式碼輸出結果為?
const promise = new Promise((resolve,reject)=> {
console.log(1)
resolve(5)
console.log(2)
reject(6)
})
promise.then((value)=> {
console.log(value)
console.log(3)
}).catch(value => {
console.log(value)
})
console.log(4)
倒數幾張的防雷圖~~~
以下為輸出結果
1
2
4
5
3
要解決這個問題就需要把你前幾天所學的東西全部用上了
我們都知道js根據event loop會先執行同步的程式碼,所以
1
2
4
會先被印出,看到這邊你可能覺得有點奇怪了,1 & 2不是在promise裡面嗎? 而promise不是非同步的程式碼嗎?
nonono 可愛的傻孩子,promise會產生一個非同步的值,但它從來就不是非同步的程式碼,取值的行為是非同步沒錯,因為我不知道你會在什麼時候呼叫.then或是.catch,但promise一旦定義就會馬上執行裡面的程式碼,否則它怎麼會知道該resolve還是reject這個promise呢?
現在我們處理完同步的部分了,剩下的就是promise取值而已囉!
promise.then((value)=> {
console.log(value)
console.log(3)
}).catch(value => {
console.log(value)
})
要解這段程式碼,首先你就需要知道這個promise最終的狀態是fulfilled || rejected,回頭看一下吧!
const promise = new Promise((resolve,reject)=> {
console.log(1)
resolve(5) // 先到先贏,是fulfilled
console.log(2)
reject(6)
})
記得我們之前提到的觀念嗎?
因此,一旦執行resolve或reject之後,你後面有再多的resolve/reject都不會改變結果的! 既然是fulfilled我們就可以放心地只看.then那段,而resolved的值就是我們的value,最終可以看成
promise.then((value)=> {
console.log(5)
console.log(3)
})
綜合起來就是你看到的12453囉! 一步步拆解後也沒這麼難對吧?
event loop、promise
本文章同步發布於個人部落格,有興趣的朋友也可以來逛逛~!